<template>
  <div>
    <el-divider content-position="center">正在审核当前选择的竞赛</el-divider>
    <el-form disabled style="margin-top: 50px; width: 1200px;" label-width="auto">
      <el-form-item label="竞赛标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入竞赛标题" />
      </el-form-item>
      <el-form-item label="竞赛描述" prop="description">
        <el-input v-model="form.description" placeholder="请输入竞赛描述" />
      </el-form-item>
      <el-form-item label="竞赛人数" prop="personNum">
        <el-input v-model="form.personNum" placeholder="请输入允许参加的竞赛人数 如果为空 说明不限制参加人数" />
      </el-form-item>
      <el-form-item label="内容详情">
        <editor v-model="form.content" :min-height="500" />
      </el-form-item>
      <el-form-item label="封面地址" prop="cover">
        <image-upload v-model="form.cover" />
      </el-form-item>
      <el-form-item label="活动地址" prop="local">
        <el-input v-model="form.local" placeholder="请输入活动地址" />
      </el-form-item>
      <el-form-item label="是否允许提交电子档" prop="isEmail">
        <template slot-scope="scope">
          <el-radio v-model="form.isSystem" label="0">是</el-radio>
          <el-radio v-model="form.isSystem" label="1">否</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="是否收费" prop="isToll">
        <template slot-scope="scope">
          <el-radio v-model="form.isSystem" label="0">是</el-radio>
          <el-radio v-model="form.isSystem" label="1">否</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="收取费用" prop="toll">
        <el-input v-model="form.toll" placeholder="请输入收取费用" />
      </el-form-item>
      <el-form-item label="竞赛开始时间" prop="startDate">
        <el-date-picker clearable v-model="form.startDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择竞赛开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="竞赛结束时间" prop="endDate">
        <el-date-picker clearable v-model="form.endDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择竞赛结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否使用报名模板" prop="isSystem">
        <!-- <el-input v-model="form.isSystem" placeholder="请输入是否使用系统自带的报名模板 0-&gt;使用 1-&gt;不使用" /> -->
        <template slot-scope="scope">
          <el-radio v-model="form.isSystem" label="0">是</el-radio>
          <el-radio v-model="form.isSystem" label="1">否</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="主办方" prop="organizer">
        <el-input v-model="form.organizer" placeholder="请输入主办方" />
      </el-form-item>
      <el-form-item label="发布者名称" prop="pushName">
        <el-input v-model="form.pushName" placeholder="请输入该字段用于防止联表查询" />
      </el-form-item>
      <!-- <el-form-item label="分类id" prop="categoryId">
        <el-input v-model="form.categoryId" placeholder="请输入分类id" />
      </el-form-item> -->
      <el-form-item label="报名开始时间" prop="enrollStartDate">
        <el-date-picker clearable v-model="form.enrollStartDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择报名开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="报名结束时间" prop="enrollEndDate">
        <el-date-picker clearable v-model="form.enrollEndDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择报名结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="已参加人数" prop="participationNum">
        <el-input v-model.number="form.participationNum" placeholder="请输入已参加人数" />
      </el-form-item>
      <el-form-item label="浏览量" prop="viewNum">
        <el-input v-model.number="form.viewNum" placeholder="请输入浏览量" />
      </el-form-item>
      <el-form-item label="是否允许评论" prop="isComment">
        <template slot-scope="scope">
          <el-radio v-model="form.isComment" label="0">是</el-radio>
          <el-radio v-model="form.isComment" label="1">否</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="是否置顶" prop="isTop">
        <template slot-scope="scope">
          <el-radio v-model="form.isTop" label="0">是</el-radio>
          <el-radio v-model="form.isTop" label="1">否</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="是否允许团队参赛" prop="isTeam">
        <template slot-scope="scope">
          <el-radio v-model="form.isTeam" label="0">是</el-radio>
          <el-radio v-model="form.isTeam" label="1">否</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="团队人数" prop="teamNum">
        <el-input v-model.number="form.teamNum" placeholder="请输入团队人数" />
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: right; margin: 20px;" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="checkContestSuccess">审核通过</el-button>
      <el-button type="warning" @click="checkContestRefuse">拒绝通过</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

    <!-- 审核记录框 预备发送前台用户消息 -->
    <el-dialog title="请填写审核结果信息" :visible.sync="openMessage" width="600px" append-to-body>
      <el-form ref="message" label-width="80px">
        <el-form-item label="初说明" prop="message">
          <el-input v-model="messageForm.message" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="记录标题" prop="title">
          <el-input v-model="messageForm.title" placeholder="请输入记录标题" />
        </el-form-item>
        <el-form-item label="具体原因" prop="tangible">
          <editor v-model="messageForm.tangible" :min-height="250" />
        </el-form-item>
        <el-form-item label="发送时间" prop="sendTime">
          <el-date-picker clearable v-model="messageForm.sendTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择发送时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getContest, checkContest, sendMessage } from "@/api/contest/contest";
export default {
  data() {
    return {
      form: {},
      messageForm: {
        message: null,
        title: null,
        tangible: null,
        sendTime: null,
        userId: null,
        isDel: '0',
      },
      openMessage: false
    }
  },


  created() {
    this.getContestInfo()
    this.open()
  },


  methods: {
    open() {
      this.$notify({
        title: '注意',
        message: '审核员 请认真审核此竞赛是否有违规信息',
        type: 'warning',
        offset: 100
      });
    },

    async getContestInfo() {
      console.log(this.$route.query.id);
      const { data } = await getContest(this.$route.query.id)
      this.form = data
      //每次获取到了数据后 需要把监听变量的值也赋值为默认值
      console.log('监听变量', this.$store.state.monitor.monitorVariables);
      this.$store.dispatch('monitor/checkfalse') // 触发check 是true会变成false
    },

    async submitForm() {
      //赋值用户id
      this.messageForm.userId = this.form.pushId
      //调用接口保存记录
      const { code } = await sendMessage(this.messageForm)
      if (code === 200) {
        this.$notify({
          title: '成功',
          message: '审核流程结束',
          type: 'success',
        });
        //因为审核完毕后很难去刷新第一个页面所以使用vuex中的监控变量去完成对应业务
        this.$store.dispatch('monitor/checktrue') // 触发check
        this.openMessage = false
        this.$router.push('/activitys/contest/')
        this.messageForm = {}
      }
    },

    openMessageModel() {
      //开启
      this.openMessage = true
    },

    async checkContestSuccess() {
      const contesId = this.$route.query.id
      const status = "0"
      const { code } = await checkContest(contesId, status)
      if (code == 200) {
        // this.$router.push('/activitys/contest/')
        this.$notify({
          title: '成功',
          message: '审核完成',
          type: 'success',
        });
        //打开审核记录框填写审核信息
        this.openMessageModel()
      }
      //因为审核完毕后很难去刷新第一个页面所以使用vuex中的监控变量去完成对应业务
      // this.$store.dispatch('monitor/checktrue') // 触发check
    },
    async checkContestRefuse() {
      const contesId = this.$route.query.id
      const status = "2"
      const { code } = await checkContest(contesId, status)
      if (code == 200) {
        // this.$router.push('/activitys/contest/')
        this.$notify({
          title: '成功',
          message: '审核完成',
          type: 'success',
          offset: 100
        });
        //打开审核记录框填写审核信息
        this.openMessageModel()
      }
      //因为审核完毕后很难去刷新第一个页面所以使用vuex中的监控变量去完成对应业务
      // this.$store.dispatch('monitor/checktrue') // 触发check
    },
    cancel() {
      this.$router.push('/activitys/contest')
      this.form = {}
    },
  }
}
</script>

<style>
</style>